<!DOCTYPE html>
<html lang="zh">
<html lang="zh" xmlns:th="https://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('文件上传')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <style>
        .file-caption-main {
            display: none;
        }

        .file-preview {
            border: 0;
        }

        .fileinput-remove {
            display: none;
        }
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h4>素材库</h4>
                </div>
                <div class="ibox-content form-horizontal">
                    <button class="btn btn-success " type="button"><i class="fa fa-upload"></i> <span
                            class="bold"> 上传图片到本地图库</span></button>
                    <button class="btn btn-success " type="button"><i class="fa fa-upload"></i> <span
                            class="bold"> 上传图片到七牛云</span></button>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group ">
                        <label class="col-sm-2 control-label">网络图片</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="tabs-container">

                    <div class="tabs-left">
                        <ul class="nav nav-tabs">
                            <li class="active">
                                <a data-toggle="tab" href="#tab-8"> 七牛云图库</a>
                            </li>
                            <li class="">
                                <a data-toggle="tab" href="#tab-9"> 本地图库</a>
                            </li>
                        </ul>
                        <div class="tab-content ">
                            <div id="tab-8" class="tab-pane active">
                                <div class="panel-body">
                                    <strong id="qiNiuYunSize"></strong>
                                    <div class="hr-line-dashed"></div>
                                    <div class="form-group" style="height:600px;overflow-x:hidden;overflow-y:auto">
                                        <div class="file-loading">
                                            <input id="qiNiuYunContainer" type="file" multiple>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="tab-9" class="tab-pane">
                                <div class="panel-body">
                                    <strong>栅格系统</strong>

                                </div>
                            </div>
                        </div>

                    </div>

                </div>

                <div class="form-group">
                    <div class="mail-body text-right tooltip-demo">
                        <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i
                                class="fa fa-check"></i>保 存
                        </button>&nbsp;
                        <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i
                                class="fa fa-reply-all"></i>关 闭
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script type="text/javascript">
    $(document).ready(function () {
        var initialPreview = new Array();
        var initialPreviewConfig = new Array();
        //发送请求获取数据
        $.operate.ajaxSend("/file/image/list/2", "get", "json", "", function (result) {
            console.log(result)
            if (result.code == web_status.SUCCESS) {
                //封装数据
                var list = result.list
                //设置页面大小
                $("#qiNiuYunSize").text("七牛云存有" + list.length + "张图片");
                if (list.length > 0) {
                    for (var i = 0; i < list.length; i++) {
                        initialPreview[i] = list[i].path;
                        var obj = new Object();
                        obj.caption = list[i].name;
                        obj.size = list[i].size
                        initialPreviewConfig[i] = obj
                    }
                }
            }
            $.modal.closeLoading();
        });
        $("#qiNiuYunContainer").fileinput({
            'theme': 'explorer-fas',
            overwriteInitial: false,
            dropZoneEnabled: false,
            initialPreviewAsData: true,
            initialPreview: initialPreview,
            initialPreviewConfig: initialPreviewConfig
        });
    });

    $(document).on("click", ".file-preview-image", (function () {
        console.log(1)

    }));
</script>
</body>
</html>
